<!doctype html> 
<html lang="zh_CN">
 <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="./fonts/boostrapicons/bootstrap-icons.css">
    <title>注册</title>
    <style> 
      .login{
         margin-top:130px;
      }
    </style>
  </head>
  <body>
    <!-- 导航条 -->
    <div class="container-fluid">
      <div class="row">
        <div class="col px-0">
          <nav class="navbar  navbar-expand-md navbar-light" style="background-color: pink;">
            <a class="navbar-brand">Logo</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse"  id="navbarText">
              <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#" data-toggle="modal" data-target="#exampleModal">登录 <span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">
                    购物车
                    <span class="badge badge-primary badge-pill">14</span>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">我的订单</a>
                </li>
              </ul>              
            </div>
            
          </nav>
        </div>
      </div>
    </div>
    <!-- \导航条 -->
    <!-- 表单控件 -->
    <div class="container">
      <div class="row justify-content-center  login">
        <div class="col-10 col-sm-9 col-md-7">
          <div class="card shadow">
            <div class="card-body">
              <h5 class="card-title text-center">注册用户</h5>
              <form>
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                  <small id="emailHelp" class="form-text text-muted">请输入合法的邮箱.</small>
                  <small class="invalid-feedback">邮箱不能为空. </small>
                  <small class="valid-feedback">ok. </small>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword1">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword2">RePassword</label>
                  <input type="password" class="form-control" id="exampleInputPassword2">
                </div>
                <div class="form-group form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
                  <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                <button type="submit" class="btn btn-primary btn-block">Submit</button>
              </form> 
            </div>
          </div>
          
        </div>
      </div>
    </div>

    <!-- 模态框单独放 -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">用户登录</h5>
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="card">
              <div class="card-body"> 
                <form>
                  <div class="form-group">
                    <label for="exampleInputEmail1">Email address</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                  </div>
                  <div class="form-group">
                    <label for="exampleInputPassword1">Password</label>
                    <input type="password" class="form-control" id="exampleInputPassword1">
                  </div>
                  <button type="submit" class="btn btn-primary btn-block">Submit</button>
                </form> 
              </div>
            </div>
          </div> 
        </div>
      </div>
    </div>

    <!-- / 表单控件 -->
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./js/plugins/bootstrap/jquery.slim.min.js" ></script>
    <script src="./js/plugins/bootstrap/popper.min.js"></script>
    <script src="./js/plugins/bootstrap/bootstrap.min.js"></script>
    <script>
     $(function(){
      $("#exampleInputEmail1").blur(function(){
        //this本身是一个js对象。
         //var jqObj= $(this); 
         $("#emailHelp").addClass("d-none");
         if($(this).val()==""){
             $(this).addClass("is-invalid"); 
         }else{
             $(this).removeClass("is-invalid").addClass("is-valid"); 
         }
      });

      $("#exampleInputEmail1").focus(function(){
           //直接将class的属性值设置为form-control
           $(this).attr("class","form-control");
           $("#emailHelp").removeClass("d-none");
      });
        
     })
    </script>
  </body>
</html>